<style lang="scss" scoped="">
	.conv {
		display: flex;
		position: relative;
		margin-top: 10px;
		margin-bottom: 10px;
	
		&.me {
			flex-direction: row-reverse
		}
	}

	.head {
		border-radius: 50%;
		border: 1px solid gainsboro;
		width: 40px;
		height: 40px;

		margin-left: 15px;
		margin-right: 15px;
	}

	.dialog {
		background-color: rgb(240, 240, 240);
		max-width: 70%;
		min-height: 20px;
		font-size: 13px;
		color: black;
		padding: 10px;
		border: none;
		border-radius: 10px;
	}

	.dialog_me {
		background-color: #4EA0FE;
		color: white;
	}

	.dialog /deep/ div {

		&.shadow {
			box-shadow: 0px 0px 0px #fff;
		}

		;


	}


	.point {
		width: 0;
		height: 0;
		border-width: 10px;
		border-style: solid;
		position: absolute;

		top: 10px;

		&.me {
			border-color: transparent transparent transparent #4EA0FE;
			right: 52px;
		}

		&.other {
			left: 52px;
			border-color: transparent rgb(240, 240, 240) transparent transparent;

		}
	}

	.guess {
		color: #4EA0FE;
		cursor: pointer;
	}
</style>
<template>

	<div class="conv" :class="{me: obj=='me'}" ref='conv_body'>
		<img class="head" src="../../static/image/user.png" v-show="obj=='me'"></img>
		<img class="head" src="../assets/head2.jpg" v-show="obj!='me'"></img>
		<div class="point" :class="obj=='me'?'me':'other'"></div>



		<template v-if="ifMarkdown()&&type=='answer'">
			<mavon-editor class="dialog " :class="{dialog_me:obj=='me'}" style="padding-top:0;padding-bottom: 0;width:100%"
			 :autofocus="false" :boxShadow="false" :toolbarsFlag="false" :subfield="false" :defaultOpen="'preview'" :editable="false" :value="content"
			 ref='moven' />

		</template>
		<template v-else-if="type=='answer'">

			<div class="dialog" :class="{dialog_me:obj=='me'}">
				<template v-for="(item,index) in content.split('\n')">
					{{item}}<br />
				</template>
			</div>



		</template>

		<!--这里输入content为list，再chatter中事先eval过了-->
		<template v-else-if="type=='guess'">
			<div class="dialog">
				您是否对以下内容感兴趣呢？
				<template v-for="(item,index) in content">
					<div :key="index" class="guess" @click="goGuess(item)">{{index+1}}. {{item.content}}</div>
				</template>
			</div>

		</template>

		<template v-else-if="type=='appendix'">
			<div class="dialog">
				<div>相关内容可以参考这些<span style="color:indianred">附件</span>哦：</div>
				<template v-for="(item,index) in content">
					<a :key="index" :href="get_appendix_path(item.url)" target="_blank" style="color:forestgreen">{{item.name}}</a>
				</template>
			</div>

		</template>

	</div>



</template>

<script>
	import {
		mavonEditor
	} from 'mavon-editor'
	import 'mavon-editor/dist/css/index.css'
	import Axios from 'axios'
	import ajax from "../ajax_util"

	export default {
		name: 'conv',
		components: {
			mavonEditor
		},
		props: {
			obj: {
				default: "me"
			},
			content: {
				default: "你好"
			},
			type: {
				default: "answer"
			}
		},
		data() {
			return {
				text_col: 1,
				fileUrl: this.CONFIG.file_url,
			}
		},
		mounted() {
			var that = this;

			var eles = document.getElementsByClassName("v-show-content")
			for (var i = 0; i < eles.length; i++) {
				eles[i].style.padding = 0
				eles[i].style.paddingTop = '10px'
				eles[i].style.backgroundColor = "rgba(0,0,0,0)"
			}

			if (this.ifMarkdown() && this.type == 'answer') {

				var img_arr = []
				var matched_arr = this.content.match(/\!\[.*?]\((.*?)\)/g);
				for (var i in matched_arr) {
					var img_name = /\!\[.*?]\((.*?)\)/g.exec(matched_arr[i])[1];
					img_arr.push(img_name)
				}
				// if(img_arr.length>0){
				//   ajax.get({
				//     url:this.CONFIG.file_url + '/get/' + img_arr.join('&'),

				//     that:that,
				//     success:function(data){
				//       that.$nextTick(() => {
				//         for(var i in data){
				//           var img_url=this.CONFIG.file_url + '/get/' +data[i]["name"];
				//           that.$refs.moven.$imgUpdateByUrl(data[i]["name"], img_url)
				//         }
				//       })
				//     }})
				// }
				that.$nextTick(() => {
					that.setfile(img_arr)
				})
			}


		},

		methods: {
			setfile(img_file) {
				console.log('img_file length', img_file.length)
				var that = this
				if (img_file.length > 0) {
					for (let index = 0; index < img_file.length; index++) {
						var url = that.fileUrl + "/image/" + img_file[index] + ".png";
						Axios.get(url, {
							responseType: 'blob'
						}).then(function(response) {
							var blob = new Blob([response.data])
							var href = window.URL.createObjectURL(blob)
							console.log('href', href)
							that.$refs.moven.$imgUpdateByUrl(img_file[index], href)
							return href
						}).catch(function(error) {
							if (error && error.response) {
								if (error.response.status == 406) { //forbiden
									that.$Notice.error({
										desc: "访问图片不存在",
										duration: 5,
									});
								} else if (error.response.status == 403) { //forbiden
									that.$Notice.error({
										title: '请求拒绝',
										desc: '您没有当前操作权限',
									});
								} else {
									that.$Notice.error({
										title: '网络异常',
										desc: '请联系管理员进行处理',
									});
								}
							} else if (error == 406) { //forbiden
								that.$Notice.error({
									desc: "访问文件不存在",
									duration: 5,
								});
							} else {
								that.$Notice.error({
									title: '网络异常',
									desc: '请联系管理员进行处理',
								});
							}
						});
					}
				}
			},
			ifMarkdown() {
				var res = false;
				if (this.content.length > 50) {
					res = true;
				}
				return res;
			},
			goGuess(item) {
				console.log(item)
				this.$emit('goGuess', {
					"k_id": item.k_id,
					"content": item.content
				});
			},
			get_appendix_path(url) {
				return this.CONFIG.url_know + "/files/" + url
			}
		}
	}
</script>
